import { FC, useState } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import Header from '@/components/header'
import Footer from '@/components/footer'
import Banner from '@/components/banner'
import CardItem from "./components/cardItem"
import RowItem from "./components/rowItem"
import { AppstoreOutline } from 'antd-mobile-icons'
import "./index.scss"

interface IMySale {}

const MySale: FC<IMySale> = () => {

	const { t } = useTranslation()
	const [ filterType, setFilterType ] = useState(0)
	const [ sort, setSort ] = useState(0)
	const [ category, setCategory ] = useState(0)

	return (
		<div id="my-sale-page">
			<div className='market-container'>
				<Header />
				<Banner />
				<div className="market-filter">
					<div className="market-filter-title">
						<div className="market-opensea flex-between">
							<span onClick={() => setFilterType(0)} className={`${filterType === 0 ? 'active' : ''} filter-type`}>{t('market.nft')}</span>
							<span className="line"></span>
							<span onClick={() => setFilterType(1)} className={`${filterType === 1 ? 'active' : ''} filter-type`}>{t('market.gameFi')}</span>
						</div>
						<div className="market-sort flex-align-center">
							<div className="market-category">
								<div onClick={() => setCategory(0)} className={`${category === 0 ? 'active' : ''} flex-center`}>{t('market.filter1')}</div>
								<div onClick={() => setCategory(1)} className={`${category === 1 ? 'active' : ''} flex-center`}>{t('market.filter2')}</div>
								<div onClick={() => setCategory(2)} className={`${category === 2 ? 'active' : ''} flex-center`}>{t('market.filter3')}</div>
							</div>
							<div className="market-sort-icon">
								<div onClick={() => setSort(0)} className={`${sort === 0 ? 'active' : ''} flex-center`}><AppstoreOutline fontSize={12} /></div>
								<div onClick={() => setSort(1)} className={`${sort === 1 ? 'active' : ''} flex-center`}>
									<span className="row-box"></span>
								</div>
							</div>
						</div>
					</div>
					{
						sort === 0 ? <CardItem /> : <RowItem />
					}
				</div>
				<Footer />
			</div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(MySale)